<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>播放hls视频</title>
    <link href="video-js.css" rel="stylesheet">
    <script src='video.js'></script>
    <script src="videojs-contrib-hls.js" type="text/javascript"></script>
	<script src="jquery.js"></script>
    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
    <style>
        .video-js .vjs-tech {position: relative !important;}
    </style>
	<div>
		视频编码：<input id="code" type="text" value="1" style='width: 120px;height: auto'></input>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		rtsp地址：<input id="rtsp" type="text", value="rtsp://admin:Pass1234@2.36.207.50:554" style='width: 400px;height: auto'></input>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<button id="btn_play" type="button">play</button>
		&nbsp;&nbsp;&nbsp;
		<button id="btn_pause" type="button">pause</button>
	</div>
    <div>
		<br/>
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
            <source id="source" src="" type="application/x-mpegURL"></source>
        </video>
    </div>
</body>
 
<script>
$(function(){
	
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
	
	//保活心跳
	var heartbeat; 
	function keepalive(code)
	{
		// 请求json
		var req_json = 	{
							"method":"keepalive",
							"code": code
						};

		$.ajax({
			type: "POST",
			url: "/hls/",
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req_json),
			success: function(rsp_json){}
		});	
	};
	
	
	//播放
	$("#btn_play").click(function(){
		
		var code = $("#code").val();
		var rtsp = $("#rtsp").val();

		// 请求json
		var req_json = 	{
							"method":"start",
							"code": code,
							"rtsp": rtsp
						};
		$.ajax({
			type: "POST",										//传输方式POST
			url: "/hls/",										//提交URL, socket是模块名
			contentType : "application/json; charset=utf-8",	//json数据格式，utf-8编码
			data: JSON.stringify(req_json),
			success: function(rsp_json){
				myVideo.src({
					src: "/videoplay/"+code+"/video.m3u8"		 //m3u8文件url
				});
				myVideo.play(); //播放
				heartbeat = setInterval (keepalive, 5000, code);	//发送保活心跳，5秒间隔
			}
		});		
	});
	//暂停
	$("#btn_pause").click(function(){
		myVideo.pause();
		clearInterval(heartbeat);
	});
});


</script>